<template>
<div class="bg-#0d1117 p-8 overflow-y-auto container-wrap">
  <!-- <div class="bg-#0d1117 h-60vh mt-4 p-8 overflow-y-auto "> -->
  <div class="container-inner">
    <div>
      <div class="border-2 border-slate-6 rounded-full w-3 h-3 border-solid ml-34px"></div>
    </div>
    <LineGradientBox height="h-50" line-color="from-transparent via-#7C72FF via-30% to-#7C72FF">
      <div class="pt-4">
        <div class="text-slate-1 text-7xl font-bold mb-4">Let’s build from here</div>
        <div class="text-slate-4 text-2xl">The world’s leading AI-powered developer platform.</div>
      </div>
    </LineGradientBox>
    <FloorTitle title="Productivity" bgColor="bg-#7C72FF" icon="i-ic:round-code" >
      <SignUpForm />
    </FloorTitle>
    <div>
      <LineGradientBox height="h-60" line-color="from-#7C72FF via-#2DA44E via-80% to-#3FB950">
        <div class="pt-10 ml-1">
          <div class="text-slate-4 text-xl mb-4">Trusted by the world’s leading organizations ↘︎</div>
          <div class="flex flex-wrap flex-justify-around  gap-10 flex-items-center col-12 col-lg-11">
            <img src="https://github.githubassets.com/assets/3m-0151c2fda0ce.svg" alt="3M logo" height="48" class="my-3">
            <img src="https://github.githubassets.com/assets/kpmg-c249f20c5173.svg" alt="KPMG logo" height="40" class="my-3">
            <img src="https://github.githubassets.com/assets/mercedes-fcf97d2d6ec4.svg" alt="Mercedes-Benz logo" height="44" class="my-3">
            <img src="https://github.githubassets.com/assets/sap-96248a56d312.svg" alt="SAP logo" height="44" class="my-3">
            <img src="https://github.githubassets.com/assets/pg-f1f19955c4e4.svg" alt="P&amp;G logo" height="32" class="my-3">
            <img src="https://github.githubassets.com/assets/telus-df0c2109df99.svg" alt="Telus logo" height="32" class="my-3">
          </div>
        </div>
      </LineGradientBox>
      <FloorTitle title="Productivity" icon="i-ic:round-work-outline" />
      <LineGradientBox height="h-50" line-color="from-#33B3AE via-#33B3AE via-40% to-transparent">
        <div class="p-l-2 pt-4 pr-80 mb-20 line-height-relaxed">
          <div class="text-5xl text-green-6 font-500 mb-2">Accelerate innovation</div>
          <div class="text-5xl font-500 text-slate-2">Our AI-powered platform increases the pace of software development.</div>
        </div>
      </LineGradientBox>
    </div>
    <SkewCard>
      <div class="flex">
          <div class="flex-1 p-16 ani-item ani-slideInLeft">
            <div class="text-2xl font-600 line-height-relaxed text-slate-4 p-r-10 mb-36 ">
              <span class="text-slate-2">GitHub Actions</span>
              automates your build, test, and deployment workflow with simple and secure CI/CD.
            </div>
            <LinkButton title="Discover GitHub Actions" text="text-2xl" />
          </div>
          <div class="w-150">
            <img
              class="w-full block h-auto"
              loading="lazy"
              decoding="async"
              alt=""
              aria-hidden="true"
              src="https://github.githubassets.com/assets/illu-actions-2-c5178134f381.png" />
          </div>
        </div>
    </SkewCard>
    <div>
      <LineGradientBox height="h-40" line-color="from-transparent via-#33B3AE via-40% to-#33B3AE">
      </LineGradientBox>
      <FloorTitle title="Application security" />
      <LineGradientBox height="h-70" line-color="from-#33B3AE via-#33B3AE via-40% to-transparent">
        <div class="p-4 pt-8  font-500 ani-item ani-slideInLeft">
          <div class="text-5xl text-#33B3AE mb-2">Empower developers</div>
          <div class="text-4xl text-slate-2 w-560px"><span class="text-5xl">With GitHub,</span> you can secure code in minutes.</div>
        </div>
      </LineGradientBox>
    </div>
    <div class="mb-4">
      <img class="position-relative z-1 rounded-3 border" width="2498" height="1450" loading="lazy" decoding="async" alt="Illustration of project table view with cards grouped by 'Feature planning' phase." src="https://github.githubassets.com/assets/issues-plan-2-46d1ce1d4519.png" />
    </div>
    <LineGradientBox height="h-190" line-color="from-transparent  via-#F778BA via-60% to-transparent to-100%'">
      <div class="flex mb-4 relative w-full">
        <div class="border overflow-hidden rounded-2 left-auto z-1 absolute -right-10 -top-60 ani-item ani-slideInBottom" style="max-width: 595px; ">
          <img src="https://github.githubassets.com/assets/illu-projects-2-26077f1dd188.png" alt="" loading="lazy" decoding="async" width="1190" height="964" class="w-full h-auto block">
        </div>
        <img alt="" aria-hidden="true" width="1000" height="1000" 
        class="absolute -right-60 -top-100 ani-item ani-fadeIn" style="transition-delay: 1s;" loading="lazy" decoding="async" src="https://github.githubassets.com/assets/bg-glow-blue-036b8dc2d1ce.png">
        <img 
          aria-hidden="true"  
          width="81" height="612" 
          style="left: -40px; height: auto; max-width: 9vw;" 
          class="absolute bottom-70px" 
          loading="lazy" 
          decoding="async" 
          src="https://github.githubassets.com/assets/git-branch-collaboration-2-e46b1fb1d363.svg">
        <div>
          <div class="pl-14 ani-item ani-slideInRight">
            <div class="pt-24 w-150 mb-10 text-2xl font-600 text-gray-5">
              <span class="text-3xl text-slate-3 mb-2">GitHub Issues and GitHub Projects</span> supply project management tools that adapt to your team alongside your code.
            </div>
            <LinkButton title="Get started with GitHub Issues" text="text-2xl" />
          </div>
          <div class="pt-30 pl-14 ani-item ani-slideInLeft">
            <div>
              <div class="border-1px rounded-full text-center w-120px text-sm color-#f778ba border-solid">Did you know?</div>
              <div class="color-#f778ba text-6xl font-bold p-y-4">80%</div>
              <div class="text-slate-3 text-2xl font-600 w-320px">reduction in onboarding time with GitHub</div>
            </div>
          </div>
        </div>
      </div>
    </LineGradientBox>
    <div class="flex gap-8">
      <SkewCard>
        <div class="p-18 font-500">
          <div class="mb-8 text-2xl text-gray-5">
            <span class="text-slate-2 font-bold mb4">GitHub Discussions</span> creates space to ask questions and have open-ended conversations.
          </div>
          <LinkButton title="Jump into GitHub Discussions" />
        </div>
        <img class="w-full d-block height-auto ani-item ani-scaleInUp" width="1208" height="804" loading="lazy" decoding="async" alt="" aria-hidden="true" src="https://github.githubassets.com/assets/illu-discussions-2-b915a6dd867e.png">
      </SkewCard>
      <SkewCard>
        <div class="p-18 font-bold">
          <div class="mb-8 text-2xl text-gray-5">
            <span class="text-slate-2 mb4">Pull requests</span> allow real-time communication and collaboration about code changes.
          </div>
          <LinkButton title="Check out pull requests" />
        </div>
        <img class="w-full d-block height-auto ani-item ani-scaleInUp" width="1208" height="804" loading="lazy" decoding="async" alt="" aria-hidden="true" src="https://github.githubassets.com/assets/illu-discussions-2-b915a6dd867e.png">
      </SkewCard>
    </div>
    <!-- floor 4 -->
    <LineGradientBox height="h-90" line-color="from-transparent via-#a371f7 to-#d2a8ff to-100%'">
      <div class="p-4 p-t-20 pr-40 pb-10">
        <div class="text-6xl text-slate-3 font-bold mb-8">Over 100 million developers call GitHub home</div>
        <div class="text-2xl text-gray-5 font-500">Whether you’re scaling your startup or just learning how to code, GitHub is your home. Join the world’s largest developer platform to build the innovations that empower humanity. Let’s build from here.</div>
      </div>
    </LineGradientBox>
    <FloorTitle title="Productivity" bgColor="bg-#7C72FF" icon="i-ic:round-code" >
      <SignUpForm />
    </FloorTitle>
  </div>
</div>
</template>
  
<script setup lang='ts'>
  import { onMounted } from 'vue';
  import LineGradientBox from './LineGradientBox.vue';
  import FloorTitle from './FloorTitle.vue';
  import SkewCard from './SkewCard.vue';
  import SignUpForm from './SignUpForm.vue'
  import LinkButton from './LinkButton.vue'

  onMounted(() => {
    const items = document.querySelectorAll('.ani-item');
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        // console.log(entry.intersectionRatio)
        // const {top, height } = entry.boundingClientRect;
        // const topToBottom = window.innerHeight - top;
        // if(topToBottom > 300){
        //   entry.target.classList.add('ani-animated');
        //   // if(topToBottom > window.innerHeight + height){
        //   //   entry.target.classList.remove('ani-animated')  
        //   // }
        // }else{
        //   entry.target.classList.remove('ani-animated')
        // }
        if(entry.isIntersecting){
          console.log(entry.intersectionRatio)
          entry.target.classList.add('ani-animated')
        }else{
          entry.target.classList.remove('ani-animated')
        }
      })
    },{
      // rootMargin: '-200px 0px 200px 0px',
      rootMargin: '280px 0px -280px 0px',
    })
    items.forEach(el => observer.observe(el))
  })
</script>

<style>
@import '../assets/styles/animate.css';

.container-wrap {
  background-image: url(https://github.githubassets.com/assets/hero-desktop-a38b0fd77b6c.webp);
  background-position: 130% 0px;
  background-repeat: no-repeat;
  background-size: 800px auto;
}
.container-inner {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
  .box-shadow-mktg-xl {
    box-shadow: 0 2.74416px 2.74416px rgba(0, 0, 0, .0274351), 0 5.48831px 5.48831px rgba(0, 0, 0, .0400741), 0 13.7208px 10.9766px rgba(0, 0, 0, .0499982), 0 20.5812px 20.5812px rgba(0, 0, 0, .0596004), 0 41.1623px 41.1623px rgba(0, 0, 0, .0709366), 0 96.0454px 89.1851px rgba(0, 0, 0, .09);
  }

</style>